<template>
  <div v-if="hiddenFormItem(item)">
    <slot
      v-if="condition"
      name="default"
    />
    <template v-else>
      <div v-if="item.viewType !== undefined">
      </div>
      <erp-form-item
        v-else
        :xs-col="xsCol"
        :sm-col="smCol"
        :md-col="mdCol"
        :lg-col="lgCol"
        :xl-col="xlCol"
        :item="item"
        :value="form[item.field]"
        :form="form"
        :form-item-style="formItemStyle"
        :label-width="labelWidthCom(item)"
        @update-field="handleUpdateField"
        @value-change="handleValueChange"
        @transmit-list="handleTransmitList"
      />
    </template>
  </div>
</template>

<script>
import ErpFormItem from '@/components/erp/ErpListForm/ErpFormItem';

/**
 * 表单项，包括表单项和预览项
 * @author maolin
 */
export default {
  name: "ErpItem",
  components: {
    ErpFormItem
  },
  props: {
    /**
     * <768px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    xsCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥768px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    smCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥992px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    mdCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥1200px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    lgCol: {
      type: Object,
      default: () => {}
    },
    /**
     * ≥1920px 响应式栅格数或者栅格属性对象
     * number/object (例如： {span: 4, offset: 4})
     * @public
     */
    xlCol: {
      type: Object,
      default: () => {}
    },
    /**
     * 表单项样式配置
     * @public
     */
    formItemStyle: {
      type: Object,
      default: () => {}
    },
    /**
     * 表单项配置
     * @public
     */
    item: {
      type: Object,
      default: () => {}
    },
    /**
     * 表单对象
     * @public
     */
    form: {
      type: Object,
      default: () => {}
    },
    /**
     * 表单项宽度
     * @public
     */
    labelWidth: {
      type: [String, Number],
      default: '100px',
    },
    /**
     * 额外参数对象
     * @public
     */
    query: {
      type: Object,
      default: () => {}
    },
    /**
     * tab高度，用于从表的列表高度
     * @public
     */
    tabPaneHeight: {
      type: [String, Number],
      default: '',
    },
    /**
     * 是否展示自定义的表单项
     * @public
     */
    condition: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    hiddenFormItem () {
      return function (item) {
        if (item.visibleFunction) {
          try{
            return new Function('form','field', 'query', item.visibleFunction )(this.form, item.field, this.query);
          }catch(e) {
            console.log('visibleFunction error');
            console.log(e);
          }
        }
        return true;
      };
    },
    lineFeed () {
      return function (item) {
        let lineFeed = item === undefined || item.col === undefined ? null : item.col.lineFeed;
        if (lineFeed !== 'head' && lineFeed !== 'foot' && lineFeed !== 'all') {
          lineFeed = null;
        }
        return lineFeed;
      };
    },
    block () {
      return function (item) {
        let times = item === undefined || item.col === undefined ? null : item.col.times;
        if(!times || isNaN(times) || times <= 0) {
          times = 1;
        }
        return times;
      };
    },
    labelWidthCom () {
      return function (item) {
        return item && item.col && item.col.labelWidth ? item.col.labelWidth : this.labelWidth;
      };
    }
  },
  methods: {
    /**
     * 修改表格配置项
     * @param {object} options 配置项对象
     * @public
     */
    changeOptions (options) {
      this.$emit('change-options', options);
    },
    /**
     * 更新表单中其他值
     * @public
     * @param data
     */
    handleUpdateField (data){
      /**
       * 更新表单中其他值
       * @public
       * @param data
       */
      this.$emit('update-field',data);
    },
    /**
     * 更新表单中的值
     * @public
     * @param data
     */
    handleValueChange (data) {
      /**
       * 更新表单中的值
       * @public
       * @param data
       */
      this.$emit('value-change', data);
    },
    /**
     * 更新传递下拉列表中的选项
     * @public
     * @param data
     */
    handleTransmitList (data) {
      /**
       * 更新传递下拉列表中的选项
       * @public
       * @param data
       */
      this.$emit('transmit-list', data);
    }
  },
  mounted () {
    // console.log(this.form)
  }
};
</script>

<style scoped>

</style>
